<template>
	<view class="bg-white">
		<template v-for="(item,index) in survey">
			<view class="" v-show="item.order==current" :key="item.order">
				<view class="question">
					<view class="q-title">
						<text>{{item.question}}</text>
					</view>
					<view class="choose">
						<view class="choose-item" :class="optionCur==choose.coding?'choosed':''"
							v-for="(choose,index2) in item.options" @tap="justThis(choose.coding)" :key="choose.coding">
							<text>{{choose.option}}</text>
							<image src="../static/right.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="jindutiao">
					<view class="progress-box">
						<progress :percent="item.order*10" activeColor="#007AFF" stroke-width="6" />
					</view>
					<view class="progress">
						<view v-show="current!=1" class="back" @tap="backLast">上一题</view>
						<view v-show="current==1" class="zhanwei"></view>
						<text>{{item.order}}/10</text>
						<view v-if="result[current-1]&&current!=10" class="back" @tap="backNext">下一题</view>
						<view v-else class="zhanwei"></view>
					</view>
				</view>
				<view class="text" v-if="current!=10">
					<text>温馨提示：填写进行测评问卷时，请您确保选项真实,准确,完整和有效可靠。如问卷中存在欺诈,隐瞒或有其他不实陈述而导致问卷结果与投资实际情况不符,甚至出现投资亏损等情况的,本平台及合作机构不承担任何责任。</text>
				</view>
				<label class="text" v-else @tap="goResult">
					<radio value="" style="transform:scale(0.6)" color="#D94B41" />
					<view class="">
						<label class="radio">本人确认仅为中国税收居民。(若有其他国家税收居民身份,请联系客服）</label>
					</view>
				</label>
			</view>
		</template>
	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from 'vuex';
	const {
		mapActions,
		mapState
	} = createNamespacedHelpers('users');
	export default {
		data() {
			return {
				confime: false, //协议状态
				result: [],
				current: 1, //当前页码
				optionCur: 0, //题目选项
				survey: [{
					question: "1.你的学历是？",
					options: [{
						option: "a. 初中及以下",
						coding: 1
					}, {
						option: "b. 高中 / 中专",
						coding: 2
					}, {
						option: "c. 大专",
						coding: 3
					}, {
						option: "d. 本科",
						coding: 4
					}, {
						option: "e. 硕士及以上",
						coding: 5
					}],
					order: 1
				}, {
					question: "2. 您的职业为？",
					options: [{
						option: "a. 无固定职业",
						coding: 1
					}, {
						option: "b. 金融行业从业人员",
						coding: 2
					}, {
						option: "c. 专业技术人员",
						coding: 3
					}, {
						option: "d. 私营业主或企事业单位管理人员",
						coding: 4
					}, {
						option: "e. 一般企业事业单位员工",
						coding: 5
					}],
					order: 2
				}, {
					question: "3. 您的主要收入来源是？",
					options: [{
						option: "a. 无固定收入",
						coding: 1
					}, {
						option: "b. 出租，出售房地产等非金融性资产收入",
						coding: 2
					}, {
						option: "c. 利息，股息，转让证券等金融性资产收入",
						coding: 3
					}, {
						option: "d. 生产经营所得",
						coding: 4
					}, {
						option: "e. 工资，劳务报酬",
						coding: 5
					}],
					order: 3
				}, {
					question: "4. 您的家庭年收入",
					options: [{
						option: "a. 10万元以下",
						coding: 1
					}, {
						option: "b. 10-30万元",
						coding: 2
					}, {
						option: "c. 30-50万元",
						coding: 3
					}, {
						option: "d. 50-100万元",
						coding: 4
					}, {
						option: "e. 100万元以上",
						coding: 5
					}],
					order: 4
				}, {
					question: "5. 您每年的家庭可支配收入中，可用于投资的比例为？",
					options: [{
						option: "a. 小于10%",
						coding: 1
					}, {
						option: "b. 10%至20%",
						coding: 2
					}, {
						option: "c. 20%至40%",
						coding: 3
					}, {
						option: "d. 40%至60%",
						coding: 4
					}, {
						option: "e. 大于60%",
						coding: 5
					}],
					order: 5
				}, {
					question: "6. 您是否有尚未还清的债务？",
					options: [{
						option: "a. 有，且包含以上多项债务类型",
						coding: 1
					}, {
						option: "b. 有，亲戚借款",
						coding: 2
					}, {
						option: "c. 有，信用卡欠款，消费信贷等短期信用债务",
						coding: 3
					}, {
						option: "d. 有，住房抵押贷款等长期定额债务",
						coding: 4
					}, {
						option: "e. 没有",
						coding: 5
					}],
					order: 6
				}, {
					question: "7. 您有多少年的投资经验？",
					options: [{
						option: "a. 没有经验",
						coding: 1
					}, {
						option: "b. 少于2年",
						coding: 2
					}, {
						option: "c. 2至5年",
						coding: 3
					}, {
						option: "d. 5至10年",
						coding: 4
					}, {
						option: "e. 10年以上",
						coding: 5
					}],
					order: 7
				}, {
					question: "8. 您的投资目的是？",
					options: [{
						option: "a. 资产保值",
						coding: 1
					}, {
						option: "b. 资产保值，可有固定收益",
						coding: 2
					}, {
						option: "c. 资产稳健增长",
						coding: 3
					}, {
						option: "d. 资产快速且稳健增长",
						coding: 4
					}, {
						option: "e. 资产迅速增长",
						coding: 5
					}],
					order: 8
				}, {
					question: "9. 以下哪项描述符合您的投资态度？",
					options: [{
						option: "a. 厌恶风险,不希望本金损失,希望获得稳定回报",
						coding: 1
					}, {
						option: "b. 保守投资,不希望本金损失,愿意承担一定幅度的波动",
						coding: 2
					}, {
						option: "c. 对风险不是很反感,愿意承担一定风险并持续获得收益",
						coding: 3
					}, {
						option: "d. 寻求资金的较高收益和成长性,愿意承担有限本金损失",
						coding: 4
					}, {
						option: "e. 希望赚取高回报,愿意为此承担任何本金损失",
						coding: 5
					}],
					order: 9
				}, {
					question: "10. 您认为能承受的最大投资损失是多少？",
					options: [{
						option: "a. 不能承受损失",
						coding: 1
					}, {
						option: "b. 10%以内",
						coding: 2
					}, {
						option: "c. 10%-30%",
						coding: 3
					}, {
						option: "d. 30%-50%",
						coding: 4
					}, {
						option: "e. 超过50%",
						coding: 5
					}],
					order: 10
				}]
			}
		},
		computed:{
			ris(){
				return this.result.reduce((data,score)=>{return data+=score},0)
			}
		},
		methods: {
			...mapActions(['riskTest']),
			justThis(coding) {
				this.optionCur = coding
				this.goResult2()
				//讲选项添加到结果
				this.$set(this.result,this.current - 1,this.optionCur);
				// this.result[this.current - 1] = this.optionCur
				if (this.current < 10) {
					//选项已有则返回没有则回到未选择状态
					this.optionCur = this.result[this.current] ? this.result[this.current] : 0
				}
				//当前页码+1
				this.current = this.current < 10 ? this.current + 1 : this.current
				console.log(this.result)

			},
			//返回上一题
			backLast() {
				this.current -= 1
				this.optionCur = this.result[this.current - 1]
				console.log(this.result)
			},
			//进到下一题
			backNext() {
				this.current += 1
				//选项已有则返回没有则回到未选择状态
				this.optionCur = this.result[this.current] ? this.result[this.current] : 0
				console.log(this.result)
			},
			//跳转结果
			goResult() {
				this.confime = true
				if (this.result.length == 10) {
					this.riskTest({
						score:this.ris,
						userId:uni.getStorageSync('userid')
					})
					uni.redirectTo({
						url: "/pagesB/ris-appraisal-result/ris-appraisal-result?ris="+this.ris
					})
				}
			},
			goResult2() {
				console.log(this.confime)
				if (this.confime) {
					this.riskTest({
						score:this.ris,
						userId:uni.getStorageSync('userid')
					})
					uni.redirectTo({
						url: "/pagesB/ris-appraisal-result/ris-appraisal-result"
					})
				}
			}
		}
	}
</script>
<style>
	page {
		background-color: #F1F1F1;
	}
</style>

<style scoped lang="scss">
	// page {
	// 	background-color: #FFFFFF;
	// }

	.question {
		width: 670rpx;
		margin: 0 auto;

		.q-title {
			height: 94rpx;
			padding: 0 23rpx;
			// line-height: 94rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #205FE6;
			border-bottom: 1px solid #E6E6E6;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.choose {
			display: flex;
			flex-direction: column;

			.choose-item {
				height: 86rpx;
				line-height: 86rpx;
				padding: 0 23rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #474747;
				position: relative;
				border-bottom: 1px solid #E6E6E6;

				image {
					display: none;
				}
			}

			.choosed {
				color: #3297E5;

				image {
					display: inline-block;
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					top: 25rpx;
					right: 50rpx;
				}
			}
		}
	}

	.jindutiao {
		margin-top: 30%;
		padding: 0 30rpx;

		.progress {
			width: 100%;
			height: 96rpx;
			font-size: 40rpx;
			font-weight: bold;
			line-height: 96rpx;
			color: #323232;
			text-align: center;
			display: flex;
			justify-content: space-between;

			// &::after{
			// 	display: block;
			// 	content: "";
			// 	width: 85rpx;
			// }
			.zhanwei {
				width: 85rpx;
			}

			.back {
				font-size: 32rpx;
				font-weight: 400;
				color: #474747;
			}
		}
	}

	.progress {
		width: 750rpx;
		height: 96rpx;
		font-size: 40rpx;
		font-weight: bold;
		line-height: 96rpx;
		color: #323232;
		text-align: center;

	}

	.text {
		background-color: #f1f1f1;
		width: 750rpx;
		padding: 30rpx;
		margin: 0 auto;
		font-size: 24rpx;
		font-weight: 400;
		color: #474747;
		display: flex;

		radio {
			margin-top: -15rpx;

			&::before {
				margin-top: -30rpx;
			}
		}
	}
</style>
